<template>
  <div class="web-main">
    <!--<div class="web-main-chars-btn"><el-button type="primary" @click="toChartsHidden('reportFromFour')">报表</el-button></div>-->
    <div>
      <div class="mb10" style="display: flex;align-items: center;">
        <h2>车辆状况详细数据展示</h2>
        <el-form class="web_form" :inline="true" :class="{'webForm_active': searchFlag }" label-width="100px" style="margin: 6px 0 0 10px">
          <el-form-item label="日期" style="margin-bottom: 0">
            <el-date-picker
              v-model="selectTime"
              type="datetimerange"
              align="right"
              unlink-panels @change="selectTimeChange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item>
          <el-form-item class="search-box" style="margin-bottom: 0">
            <el-button type="primary" @click="search">查询</el-button>
            <el-button type="primary" @click="resetSearch">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!--table-->
      <div class="mb20" style="width: 100%;position: relative;">
        <el-table
          :data="tableData"
          ref="mainTable"
          header-row-class-name="table-header-center"
          border element-loading-text="正在加载中..."
          style="margin: 0 4px;">
          <!--<el-table-column type="selection" width="40"></el-table-column>-->
          <!--<el-table-column type="index" label="序号" width="50"></el-table-column>-->
          <el-table-column :key="key" align="center" :width="value.width" v-for='(value,key) in tableHead'
                           :label="value.title">
            <template slot-scope="scope">
              <!--<div v-if="value.filter">{{scope.row[value.key] | geval(value.filter)}}</div>-->
              <!--<a v-if="value.key === 'no'" href="#" @click="handleLook(scope.row)" style="color: #409EFF; font-size: 12px;">{{scope.row.no}}</a>-->
              <div v-if="value.key === 'gmtCreate'">{{scope.row.gmtCreate | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</div>
              <div v-else-if="value.key === 'status'">{{scope.row.status | statusFilter}}</div>
              <div v-else>{{scope.row[value.key]}}</div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- el-tabs 因为el-tabs 与 charts 显示冲突 暂弃用-->
      <!--<el-tabs type="border-card">-->
        <!--<el-tab-pane>-->
          <!--<span slot="label"><i class="el-icon-date"></i> 里程数据</span>-->
          <!--xxxx1-->
          <!--&lt;!&ndash;图表1&ndash;&gt;-->
          <!--<ciams-select-charts ref="oneSelectCharts"></ciams-select-charts>-->
        <!--</el-tab-pane>-->
        <!--<el-tab-pane label="续航数据">-->
          <!--xxxx2-->
        <!--</el-tab-pane>-->
        <!--<el-tab-pane label="控制数据">-->
          <!--xxx3-->
        <!--</el-tab-pane>-->
      <!--</el-tabs>-->
      <div class="lisa-tabs">
        <div class="lisa-tab-header mb20">
          <div class="lisa-tab-header-item" :class="{'active':tabsIndex === index}"
               @click="tabHeaderClick(index)" v-for="(item,index) in lisaTabHeader">
            <div>{{item.title}}</div>
            <div v-show="tabsIndex === index">{{item.subtitle}}</div>
          </div>
        </div>
        <div class="lisa-tab-main">
          <div v-show="tabsIndex === 0" class="lisa-tab">
            <!--图表1-->
            <one-select-charts ref="oneSelectCharts"></one-select-charts>
          </div>
          <div v-show="tabsIndex === 1" class="lisa-tab">
            <!--图表2-->
            <two-select-charts ref="twoSelectCharts"></two-select-charts>
          </div>
          <div v-show="tabsIndex === 2" class="lisa-tab">
            <!--图表3-->
            <three-select-charts ref="threeSelectCharts"></three-select-charts>
          </div>
        </div>
      </div>
    </div>
    <!-- 占位 -->
    <div style="height: 50px"></div>
  </div>
</template>

<script>
  import OneSelectCharts from './carSituationConfig/oneSelectCharts'
  import TwoSelectCharts from './carSituationConfig/twoSelectCharts'
  import ThreeSelectCharts from './carSituationConfig/threeSelectCharts'
  import * as MonitorMgtAPI from '@/api/monitor'
  import * as Utils from '@/utils/index'
  // const halfYear = 365 / 2 * 24 * 3600 * 1000
  const defaultTableHead = [
    { key: 'vin', title: '车架号', width: '150' },
    { key: 'plateLicenseNo', title: '车牌号', width: '' },
    { key: 'province', title: '所在省份', width: '' },
    { key: 'city', title: '所在城市', width: '' },
    { key: 'county', title: '所在城区', width: '150' },
    { key: 'company', title: '所属企业', width: '150' },
    { key: 'driver', title: '所属司机', width: '150' },
    { key: 'status', title: '车辆状态', width: '150', filter: 'statusFilter' },
    { key: 'gmtCreate', title: '创建时间', width: '150', filter: 'parseTime("{y}-{m}-{d} {h}:{i}:{s}")' }
  ]
  const toDayOO = Utils.parseTime((new Date()).getTime(), '{y}-{m}-{d} 00:00:00')
  const toDayNow = Utils.parseTime((new Date()).getTime(), '{y}-{m}-{d} {h}:{i}:{s}')
  const start = new Date()
  const toDayWeek = start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
  export default {
    name: 'carSituationChartsShow',
    components: { OneSelectCharts, TwoSelectCharts, ThreeSelectCharts },
    data() {
      return {
        selectTime: [new Date(toDayWeek), new Date(toDayNow)],
        pickerOptions: {
          shortcuts: [
            {
              text: '今天',
              onClick(picker) {
                const end = toDayNow
                const start = toDayOO
                picker.$emit('pick', [start, end])
              }
            },
            {
              text: '昨天',
              onClick(picker) {
                const end = toDayNow
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 1)
                picker.$emit('pick', [start, end])
              }
            },
            {
              text: '最近一周',
              onClick(picker) {
                const end = toDayNow
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                picker.$emit('pick', [start, end])
              }
            }, {
              text: '最近一个月',
              onClick(picker) {
                const end = toDayNow
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                picker.$emit('pick', [start, end])
              }
            }]
        },
        lisaTabHeader: [
          { title: '里程数据', subtitle: '实际里程km' },
          { title: '续航数据', subtitle: '电量% 电压V' },
          { title: '控制数据', subtitle: '' }
        ],
        tabsIndex: 0,
        tableHead: defaultTableHead,
        tableData: [],
        searchFlag: true,
        condition: {
          startTime: Utils.parseTime(toDayWeek, '{y}-{m}-{d} {h}:{i}:{s}'),
          endTime: Utils.parseTime((new Date()).getTime(), '{y}-{m}-{d} {h}:{i}:{s}'),
          vin: ''
        },
        loadingCiams: false
      }
    },
    activated: function() {
      console.log('this.$route.query.', this.$route.query)
      const now_row = this.$route.query.row
      this.condition.vin = now_row.vin
      // this.condition.vin = 'LXWAEPG22JH000971'
      this.tableData = []
      this.tableData.push(now_row)
      // const now_row = this.$route.query.row
      this.condition.vin = now_row.vin
      this.getList()
    },
    created() {
    },
    mounted() {
    },
    methods: {
      tabHeaderClick(index) {
        this.tabsIndex = index
      },
      // 选择 时间
      selectTimeChange(val) {
        console.log('selectTimeChange', val)
        this.condition.startTime = Utils.parseTime((new Date(val[0])).getTime(), '{y}-{m}-{d} {h}:{i}:{s}')
        this.condition.endTime = Utils.parseTime((new Date(val[1])).getTime(), '{y}-{m}-{d} {h}:{i}:{s}')
      },
      getList() {
        const that = this
        MonitorMgtAPI.carInfoGetTotalDistance(this.condition).then(res => {
          if (res.data && res.data.length > 0) {
            that.$refs.oneSelectCharts.initCharts(res.data)
            that.$refs.twoSelectCharts.initCharts(res.data)
            that.$refs.threeSelectCharts.initCharts(res.data)
          } else {
            that.$message({
              message: '暂无可以显示的数据',
              type: 'warning',
              duration: 3000
            })
          }
        }).catch(err => {
          console.log('error', err)
        })
        // const oneSelectChartsData = [
        //   {
        //     gmtCreate: '2020-01-06 23:00',
        //     totalDistance: 11397,
        //     vin: 'LXWAEPG22JH000971'
        //   },
        //   {
        //     gmtCreate: '2020-01-06 22:30',
        //     totalDistance: 11397,
        //     vin: 'LXWAEPG22JH000971'
        //   },
        //   {
        //     gmtCreate: '2020-01-06 18:30',
        //     totalDistance: 11336,
        //     vin: 'LXWAEPG22JH000971'
        //   },
        //   {
        //     gmtCreate: '2020-01-06 18:00',
        //     totalDistance: 11333,
        //     vin: 'LXWAEPG22JH000971'
        //   },
        //   {
        //     gmtCreate: '2020-01-06 17:30',
        //     totalDistance: 11330,
        //     vin: 'LXWAEPG22JH000971'
        //   },
        //   {
        //     gmtCreate: '2020-01-06 17:00',
        //     totalDistance: 11309,
        //     vin: 'LXWAEPG22JH000971'
        //   }
        // ]
        // this.$refs.oneSelectCharts.initCharts(oneSelectChartsData)
      },
      // 查询
      search() {
        this.getList()
      },
      // 重置
      resetSearch() {
        const now_row = this.$route.query.row
        this.condition = {
          startTime: Utils.parseTime(toDayWeek, '{y}-{m}-{d} {h}:{i}:{s}'),
          endTime: Utils.parseTime((new Date()).getTime(), '{y}-{m}-{d} {h}:{i}:{s}'),
          vin: now_row.vin
        }
        this.tabsIndex = 0
        this.getList()
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .web_form.webForm_active{
    height: auto;
  }
  .lisa-tabs{
    border: 1px solid #fff;
    box-shadow:0 -2px 2px  rgba(166,166,166,0.2), -2px 0 2px  rgba(166,166,166,0.2);
    padding: 10px;
  }
  .lisa-tab-header{
    display: flex;justify-content: left;align-items: center;
    color: #666;
    background-color: #fff;
    border-bottom: 1px solid #DEDEDE;
  }
  .lisa-tab-header-item{
    padding: 5px 10px;
    border-bottom: 4px solid #fff;
    font-weight: bold;
    font-size: 16px;
    text-align: center;
    min-height: 50px;
    min-width: 110px;
  }
  .lisa-tab-header-item.active{
    color: #409eff;
    border-bottom: 4px solid #409eff;
    background-color: #fff;
  }
  .lisa-tab-main{}
  .lisa-tab{}
</style>
